 <!-- 报告主页面 -->
<template>
  <div
    id="ReportPage"
    :class="['left', 'contentWidth' , {'mainBig': $store.state.isCollapse ,'mainSmall': !$store.state.isCollapse }]"
  >
    <div class="header">
      <div class="backTo" v-show="isBackShow" @click="back">
        <img src="../../../static/images/back.png" alt="返回" />
      </div>
      <div class="contentTopLeft left">
        <h2>报告</h2>
      </div>
      <maintopright></maintopright>
      <maintopleftbottom></maintopleftbottom>
    </div>
    <div id="mainReportPage" class="mainContent">
      <div class="ReportContent clearfix" v-show="!isBackShow">
        <div class="link-list center-block pull-left">
          <router-link
            v-for="(item,index) in list"
            :key="item.value"
            :to="{path:item.path,query:{in:index,item:4}}"
            :class="{'router-link-exact-active':ind == index}"
            @click.native="changeBgc(index)"
          >{{item.label}}</router-link>
        </div>
        <vue-datepicker-local class="pull-left" v-model="emptyTime" clearable />
      </div>
      <transition name="slide-fade">
        <div id="drag" v-if="$store.getters.flags && isflags">
          <div class="toolBarTitle clearfix">
            <div class="pull-left" @click="$store.state.flags=!$store.state.flags">
              <i class="shrink"></i>
            </div>
            <p class="pull-left" style="width:calc(100% - 80px);">指标对比</p>
            <div @click="clearIndexList" class="pull-right">
              <i class="clear"></i>
            </div>
          </div>
          <div class="tabTile clearfix">
            <div :class="{'active':  $store.state.comparedData.isShow}" @click="addContrast">
              <span>指标列表</span>
            </div>
            <div :class="{'active': ! $store.state.comparedData.isShow}" @click="saveGroup">
              <span>已保存组</span>
            </div>
          </div>
          <ul class="comparepop-list" v-if=" $store.state.comparedData.isShow">
            <li v-for="(item,index) in indexList" :key="index">
              <a href="javascript:void(0)">{{item}}</a>
              <i class="pull-right" @click="indexList.splice(index,1)">&times;</i>
            </li>
          </ul>
          <ul class="comparepop-list" v-if="!$store.state.comparedData.isShow">
            <li
              v-for="(item,index) in contrastData"
              :key="index"
              :class="{'active':indexs == index }"
              @click="routerLink(index)"
            >
              <a href="javascript:void(0)">{{item.title}}</a>
              <i class="pull-right" @click="clearGroup(index,$event)">&times;</i>
              <i class="pull-right edit" @click="editGroup(index,$event)"></i>
            </li>
          </ul>
          <div class="drag-button">
            <button
              :class="['btn',{'btn-noClick': !$store.state.comparedData.isBtnClick,'btn-Compared':$store.state.comparedData.isBtnClick }]"
              @click="btnCompared"
            >开始对比</button>
            <button
              class="btn btn-save"
              v-if="$store.state.comparedData.isShow"
              @click="btnSave"
            >保存对比</button>
            <span>最多6项</span>
          </div>
        </div>
      </transition>
      <transition name="fade">
        <div
          id="dragIcon"
          v-if="!$store.getters.flags && isflags"
          @click="$store.state.flags=!$store.state.flags"
          title="指标对比"
        >
          <svg
            aria-hidden="true"
            class="sidebar-icon"
            width="24"
            height="24"
            version="1.1"
            viewBox="0 0 16 16"
          >
            <path
              d="M8.625 1a7.584 7.584 0 0 0-4.147 1.236.557.557 0 0 0-.385.519c0 .309.263.559.588.559a.597.597 0 0 0 .363-.13l.01.012a6.389 6.389 0 0 1 3.571-1.079c3.424 0 6.199 2.634 6.199 5.884s-2.775 5.884-6.199 5.884a6.383 6.383 0 0 1-3.807-1.246l-.043.067a.594.594 0 0 0-.304-.092c-.325 0-.588.25-.588.558 0 .288.232.516.526.547A7.578 7.578 0 0 0 8.625 15C12.698 15 16 11.866 16 8s-3.302-7-7.375-7z"
            />
            <path
              class="svg-fill-text"
              d="M5.966 5.074h-.944v1.078h-1.9v.827h1.9v2.902c0 .271-.155.407-.465.407-.336 0-.674-.013-1.013-.038.102.339.174.648.218.928.693 0 1.161-.008 1.405-.023s.438-.104.582-.265.216-.396.216-.708V6.979h.607v-.827h-.606V5.074zM2.964 6.359v-.808H.101v.821H2.04a6.577 6.577 0 0 1-.353 1.51L.813 6.616l-.718.433 1.158 1.752a5.38 5.38 0 0 1-1.257 1.444c.198.313.361.594.488.84a6.699 6.699 0 0 0 1.299-1.467l.646 1.01.818-.508-.972-1.394a8.829 8.829 0 0 0 .689-2.367zm.996 2.996l.785-.489a30.974 30.974 0 0 0-1.187-1.523l-.686.439c.396.514.758 1.038 1.088 1.573zm8.184.718c-.056.114-.169.172-.34.172h-.462c-.225 0-.336-.132-.336-.395V8.5c.785-.6 1.55-1.238 2.295-1.915l-.857-.64a22.359 22.359 0 0 1-1.438 1.436V5.068h-.977v5.083c0 .639.316.959.949.959h.832c.262 0 .482-.031.664-.093s.318-.148.411-.26c.093-.112.174-.314.244-.608.07-.293.128-.638.171-1.032a14.773 14.773 0 0 1-.982-.32c-.061.735-.12 1.161-.174 1.276zm-3.988-.048V7.801h1.51v-.865h-1.51V5.144H7.18v4.889c0 .255-.077.438-.231.552l.475.739c.545-.28 1.306-.563 2.283-.847a9.455 9.455 0 0 1-.021-.947l-1.53.495z"
            />
          </svg>
        </div>
      </transition>
      <confirm ref="alert" :title="'请输入组名称'" :sureBtn="saveTitle">
        <input type="text" ref="inputVal" v-model="titleVal" class="alertTitle" maxlength="16" />
      </confirm>
      <confirm ref="clearFig" :message="'确认删除改组吗？'" :sureBtn="clearSigns"></confirm>
      <confirm ref="clearAll" :message="'确定全部删除吗？'" :sureBtn="clearAllSigns"></confirm>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>
<script>
import maintopright from "@/components/main/maintop/maintopRight";
import maintopleftbottom from "@/components/main/maintop/maintopLeftBottom";
import VueDatepickerLocal from "@/components/datepicker/VueDatepickerLocal";
import confirm from "@/components/confirm/confirm";
import {
  apiAddReportComparison,
  apiGetReportComparison,
  apiEditReportComparison,
  apiDelReportComparison
} from "@/api/api";
export default {
  data() {
    return {
      list: [
        { path: "/reportpage/inspectionReportListPage", label: "检验报告" },
        { path: "/reportpage/testReportListPage", label: "检查报告" }
      ],
      ind: "0",
      isBackShow: false, //判断检查报告或者检验报告路由是否消失
      emptyTime: "" /*接收时间选择控件的值*/,
      isflags: true /*判断指标对比框是否出现*/,
      //isShow: this.$store.state.comparedData.isShow,      /*  判断指标对比框里的标签页切换对象出现谁*/
      //isBtnClick: this.$store.state.comparedData.isBtnClick,     /*判断开始对比按钮是否可以点击*/
      indexs: this.$store.state.comparedData.indexs, //标识当前组的索引
      contrastData: [],
      titleVal: this.$store.state.comparedData.titleVal,
      type: 1
    };
  },
  mounted() {
    this.isRoute();
    this.getReportComparison();
    if (this.$route.query.in) {
      this.ind = this.$route.query.in;
    } else {
      this.ind = 0;
    }
  },
  computed: {
    indexList: function() {
      return this.$store.getters.indexList;
    }
  },
  watch: {
    $route: {
      handler(val, oldval) {
        this.ind = this.$route.query.ind;
        if (
          val.path.indexOf("/reportpage/reportExaminationResult") != -1 ||
          val.path.indexOf("/reportpage/reportTestresult") != -1 ||
          val.path.indexOf("/reportpage/reportIndexItem") != -1 ||
          val.path.indexOf("/reportpage/reportIndexComparison") != -1
        ) {
          this.isBackShow = true;
        } else {
          this.isBackShow = false;
        }
        if (
          val.path.indexOf("/reportpage/inspectionReportListPage") != -1 ||
          val.path.indexOf("/reportpage/reportTestresult") != -1
        ) {
          this.isflags = true;
        } else {
          this.isflags = false;
        }
      }
    },
    indexs: {
      handler(val, oldval) {
        this.$store.state.comparedData.indexs = val;
      }
    },
    titleVal: {
      handler(val, oldval) {
        this.$store.state.comparedData.titleVal = val;
      }
    }
  },
  methods: {
    back() {
      if (this.$route.query.back == 1) {
        let idReport = this.$route.query.idReport;
        let reportName = this.$route.query.reportName;
        this.$router.push({
          path: "/reportpage/reportTestresult",
          query: {
            item: 4,
            idReport: idReport,
            reportName: reportName,
            ReportPage: "检验"
          }
        });
      } else if (this.$route.query.test == 1) {
        this.$router.go(-1);
      } else {
        if (
          this.$route.path.indexOf("/reportpage/reportIndexComparison") != -1
        ) {
          this.init();
        }
        this.$router.push({
          path: "/reportpage/inspectionReportListPage",
          query: { item: 4, in: 0 }
        });
      }
    },
    isRoute() {
      if (
        this.$route.path.indexOf("/reportpage/reportExaminationResult") != -1 ||
        this.$route.path.indexOf("/reportpage/reportTestresult") != -1 ||
        this.$route.path.indexOf("/reportpage/reportIndexItem") != -1 ||
        this.$route.path.indexOf("/reportpage/reportIndexComparison") != -1
      ) {
        this.isBackShow = true;
      } else {
        this.isBackShow = false;
      }
      if (
        this.$route.path.indexOf("/reportpage/inspectionReportListPage") !=
          -1 ||
        this.$route.path.indexOf("/reportpage/reportTestresult") != -1
      ) {
        this.isflags = true;
      } else {
        this.isflags = false;
      }
    },
    changeBgc(index) {
      this.ind = index;
    },
    //点击右上角的删除按钮执行事件(全部删除按钮)
    clearIndexList() {
      if (this.$store.state.comparedData.isShow) {
        if (this.$store.state.indexList.length == 0) {
          this.$toast.center("您当前没有需要删除的！");
        } else {
          this.$refs.clearAll.show();
        }
      } else {
        if (this.contrastData.length == "") {
          this.$toast.center("您当前没有需要删除的！");
        } else {
          this.$refs.clearAll.show();
        }
      }
    },
    //点击全部删除按钮出现的弹出框的确认按钮事件
    clearAllSigns() {
      if (this.$store.state.comparedData.isShow) {
        this.$store.state.indexList = [];
      } else {
        this.type = 2;
        this.delReportComparison();
      }
    },
    init() {
      this.indexs = -1;
      this.titleVal = "";
      this.$store.state.indexList = [];
    },
    //获取当前医生存入当前患者的指标组（查询）
    getReportComparison() {
      this.contrastData = [];
      apiGetReportComparison({
        DoctorID: JSON.parse(sessionStorage.getItem("user")).ID,
        PatientId: this.$store.getters.ID
      }).then(res => {
        if (JSON.parse(res).Status == 1) {
          let Data = JSON.parse(res).Data;
          for (let item of Data) {
            this.contrastData.push({
              title: item.ContrastName,
              data: item.ContrastValue.split(","),
              id: item.ID
            });
          }
        }
      });
    },
    //把保存的对比分组存入后天数据库(添加)
    addReportComparison() {
      apiAddReportComparison({
        DoctorID: JSON.parse(sessionStorage.getItem("user")).ID,
        PatientId: this.$store.getters.ID,
        ComparisonName: this.$store.state.comparedData.titleVal,
        ComparisonValues: this.$store.state.indexList + ""
      }).then(res => {
        this.getReportComparison();
      });
    },
    //修改当前保存的指标对比组（编辑）
    editReportComparison() {
      apiEditReportComparison({
        DoctorID: JSON.parse(sessionStorage.getItem("user")).ID,
        PatientId: this.$store.getters.ID,
        ComparisonName: this.$store.state.comparedData.titleVal,
        ComparisonValues: this.$store.state.indexList + "",
        ID: this.$store.state.comparedData.id
      }).then(res => {
        this.getReportComparison();
      });
    },
    delReportComparison() {
      apiDelReportComparison({
        DoctorID: JSON.parse(sessionStorage.getItem("user")).ID,
        PatientId: this.$store.getters.ID,
        ID: this.$store.state.comparedData.id,
        type: this.type
      }).then(res => {
        this.getReportComparison();
      });
    },
    //点击开始对比按钮执行事件
    btnCompared() {
      //console.log(this.$store.getters.indexList)
      if (this.$store.state.comparedData.isBtnClick) {
        if (this.indexList.length != 0) {
          this.$router.push({
            path: "/reportpage/reportIndexComparison",
            query: { item: 4 }
          });
          this.$store.state.flags = false;
        } else {
          this.$toast.center("请先选择指标项");
        }
      } else {
        this.$toast.center("请选择一个组");
      }
    },
    //点击保存对比按钮执行的事件
    btnSave() {
      if (this.indexs == -1 && this.contrastData.length == 6) {
        this.$toast.center("指标组最多只能有6个");
        return false;
      }
      if (this.indexList.length != 0) {
        this.$refs.alert.show();
        this.$nextTick(function() {
          //DOM 更新了
          this.$refs.inputVal.focus();
        });
      } else {
        this.$toast.center("请先选择指标项");
      }
    },
    //点击对比组的删除按钮弹出确认框(单个)
    clearGroup(index, event) {
      event.stopPropagation(); //阻止事件冒泡
      this.$store.state.comparedData.id = this.contrastData[index].id;
      this.$refs.clearFig.show();
    },
    //点击删除对比组弹出框的确认按钮（单个）
    clearSigns() {
      this.type = 1;
      this.delReportComparison();
      this.init();
    },
    //点击保存对比弹出输入框的确定按钮
    saveTitle() {
      let titleArr = [];
      for (var item of this.contrastData) {
        titleArr.push(item.title);
      }
      if (this.titleVal == "") {
        this.$toast.center("请输入组名！");
        setTimeout(() => {
          this.$refs.alert.show();
          this.$nextTick(function() {
            //DOM 更新了
            this.$refs.inputVal.focus();
          });
        }, 300);
      } else {
        if (this.indexs == -1) {
          //判断是否是新增或者是编辑（indexs 为-1 时就是新增反之就是编辑）
          if ($.inArray(this.titleVal, titleArr) == -1) {
            //判断当前所取的组名是否重复
            this.addReportComparison(); //执行添加图数据库操作
            this.saveGroup(); //执行跳转组列表标签页
            this.init(); //重置数据
          } else {
            this.$toast.center("已有该名字请换个名字");
            this.titleVal = "";
            setTimeout(() => {
              this.$refs.alert.show();
              this.$nextTick(function() {
                //DOM 更新了
                this.$refs.inputVal.focus();
              });
            }, 300);
          }
        } else {
          titleArr.splice(this.indexs, 1);
          if ($.inArray(this.titleVal, titleArr) == -1) {
            this.editReportComparison(); //执行编辑操作
            this.saveGroup();
            this.init();
          } else {
            this.$toast.center("已有该名字请换个名字");
            this.titleVal = "";
            setTimeout(() => {
              this.$refs.alert.show();
              this.$nextTick(function() {
                //DOM 更新了
                this.$refs.inputVal.focus();
              });
            }, 300);
          }
        }
      }
    },
    //点击新增对比标签页切换为新增对比
    addContrast() {
      this.$store.state.comparedData.isShow = true;
      this.$store.state.comparedData.isBtnClick = true;
    },
    //点击已保存组标签页切换为已保存组
    saveGroup() {
      if (this.indexs == -1) {
        this.$store.state.comparedData.isShow = false;
        this.$store.state.comparedData.isBtnClick = false;
      } else {
        this.$store.state.comparedData.isShow = false;
        this.$store.state.comparedData.isBtnClick = true;
      }
    },
    //编辑单个自定义组对比方法
    editGroup(index, event) {
      event.stopPropagation(); //阻止事件冒泡
      this.indexs = index;
      this.titleVal = this.contrastData[index].title;
      this.$store.state.comparedData.id = this.contrastData[index].id;
      this.$store.state.indexList = this.contrastData[index].data;
      this.addContrast();
    },
    //点击自定义组里的列表时执行事件
    routerLink(index) {
      if (this.indexs == index) {
        this.$store.state.comparedData.isBtnClick = true;
        this.$store.state.indexList = this.contrastData[index].data;
        this.titleVal = this.contrastData[index].title;
      } else {
        this.indexs = index;
        this.$store.state.comparedData.isBtnClick = true;
        this.$store.state.indexList = this.contrastData[index].data;
        this.titleVal = this.contrastData[index].title;
      }
    }
  },
  components: {
    maintopright,
    maintopleftbottom,
    VueDatepickerLocal,
    confirm
  }
};
</script>
<style scoped>
#drag {
  position: absolute;
  top: 30px;
  right: 20%;
  width: 270px;
  min-height: 380px;
  border-radius: 2px;
  box-shadow: 0 0 5px #999;
  background-color: #fff;
  z-index: 99999;
}
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
#drag .drag-button {
  position: absolute;
  width: 100%;
  bottom: 20px;
  margin-top: 20px;
  padding: 0 15px 0 10px;
}
.tabTile {
  width: 100%;
  height: 35px;
  line-height: 35px;
  display: flex;
  justify-content: center;
  cursor: pointer;
  border-bottom: 1px solid #fbfbfb;
}
.alertTitle {
  height: 34px;
  width: 70%;
  border: 1px solid #dedde0;
  padding-left: 10px;
  border-radius: 8px;
  margin: 20px 30px;
  -webkit-appearance: none;
}

.tabTile > div {
  width: 50%;
  text-align: center;
}
.tabTile > div.active span {
  display: inline-block;
  line-height: 35px;
  color: #11a7f3;
  border-bottom: 2px solid #11a7f3;
}
#drag .drag-button span {
  color: #ccc;
  font-size: 12px;
  margin-left: 20px;
}
#drag .drag-button a {
  color: #666;
  margin-top: 8px;
}
#drag .drag-button a:hover {
  color: red;
}
.btn-Compared {
  color: #fff;
  margin-right: 5px;
  background-color: #10a7f3;
  border-color: #11a7f3;
}
.btn-save {
  color: #fff;
  background-color: #02bb97;
  border-color: #02bb97;
}
.comparepop-list {
  padding-top: 0;
  border-top: solid 1px #f5f5f5;
}
.comparepop-list li {
  padding-left: 10px;
  padding-right: 10px;
  height: 40px;
  border-bottom: dotted 1px #ccd3e4;
  position: relative;
  line-height: 40px;
}
.comparepop-list li a {
  display: inline-block;
  max-width: 210px;
  line-height: 20px;
}
.btn-noClick {
  color: #fff;
  background-color: #cdcdcd;
  border-color: #ccc;
}
.comparepop-list li i {
  width: 27px;
  height: 40px;
  text-align: center;
  font-size: 25px;
  color: #ddd;
  cursor: pointer;
}
.comparepop-list li.active {
  background-color: #11a7f3;
}
.comparepop-list li.active a {
  color: #fff;
}
.comparepop-list li i.edit:before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url("../../../static/images/edit.png") no-repeat;
  background-size: cover;
}
.comparepop-list li i:hover {
  color: #666;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(20%);
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
#dragIcon {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  cursor: pointer;
}
#drag .toolBarTitle {
  position: relative;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #efefef;
}
.toolBarTitle > div {
  width: 40px;
  height: 40px;
  cursor: pointer;
}
#mainReportPage {
  overflow: hidden;
  padding: 0 0 20px 5px;
}
.toolBarTitle .shrink {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: url("../../../static/images/icon-duibi.png") no-repeat;
  margin-top: 12px;
}
.toolBarTitle .clear {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("../../../static/images/clean.png") no-repeat;
  margin-top: 12px;
}
#mainReportPage .link-list {
  height: 30px;
  line-height: 30px;
}
.sidebar-icon {
  display: inline-block;
  fill: #11a7f3;
}
#dragIcon:hover .sidebar-icon {
  fill: #fd6500;
}
#mainReportPage .link-list a {
  font-size: 14px;
  display: inline-block;
  margin-right: 15px;
}
.ReportContent {
  margin-top: 20px;
  padding-left: 45px;
}
#mainReportPage .link-list a:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 20px;
  background-color: #ccc;
  margin-left: 10px;
  vertical-align: middle;
}
#mainReportPage .link-list a:last-child:after {
  width: 0;
}

#mainReportPage .link-list a.router-link-exact-active {
  color: #11a7f3;
}
@media screen and (max-width: 768px) {
  .ReportContent{
    padding-left: 15px;
  }
}
@media screen and (max-width: 425px) {
  #drag {
    right: initial;
    width: 270px;
  }
  #mainReportPage {
    overflow: auto;
    padding: 0 0 20px 5px;
        overflow-y: auto;
  }
}
@media screen and (max-width: 325px) {
  .ReportContent {
    margin-top: 20px;
    padding-left: 0;
  }
  #mainReportPage .link-list {
    height: 30px;
    line-height: 30px;
    padding-left: 25px;
  }
  #drag {
    right: initial;
    width: 240px;
  }
}
</style>
